﻿@model WAMM.WebUI.Models.PersonWebUIModel

@{
	View.Title = "Edit";
    string PhotoSizeType = WAMM.WebUI.Models.PhotoWebUIModel.Size.Small.ToString();
}

@section HeadAdditions {
	<link type="text/css" href="@Url.Content("~/Content/ui-lightness/jquery-ui-1.8.5.custom.css")" rel="stylesheet" />	
	<script type="text/javascript" src="@Url.Content("~/scripts/jquery-ui-1.8.5.custom.min.js")"></script>
	<script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(function () {
			$("#pictureArea").click(function (event) {
				$("#ajaxUploadArea").dialog('open');
			});
			$("#pictureArea").mouseenter(function (event) {
				$("#addPicture").toggle();
				cursor
			});
			$("#pictureArea").mouseleave(function (event) {
				$("#addPicture").toggle();
			});
		});
		$(function () {
			$("#BirthDate").datepicker();
		});
		$(function () {
			$("#ajaxUploadArea").dialog({
				bgiframe: true,
				height: 200,
				modal: true,
				autoOpen: false,
				resizable: false
			})
		});
		$(function () {

			$("#ajaxUploadForm").ajaxForm({
				iframe: true,
				dataType: "json",
				beforeSubmit: function () {
					$("#ajaxUploadMessage").html("<img src='/Content/ajax.gif' /> Uploading...");
				},
				success: function (result) {
					$("#ajaxUploadMessage").html("Upload successful");
					$("#personPic").attr('src', "@Model.PictureUrl" + "?sizeType=@PhotoSizeType" + "&" + (new Date()).getTime());
					$("#ajaxUploadArea").dialog('close');
				},
				error: function (xhr, textStatus, errorThrown) {
					alert('error');
					$("#ajaxUploadMessage").html("Error occurred on upload.");
				}
			});
		});

	</script>
}

	<h2>Edit</h2>
	<div id="ajaxUploadArea" title="Upload picture">
		@using (Html.BeginForm("UploadPicture", "Person", FormMethod.Post, new { enctype = "multipart/form-data", id = "ajaxUploadForm" })) {
			<p><input type="file" id="file" name="file" size="23"/> </p>
			@Html.HiddenFor(m => m.Id)
			<p><input type="submit" value="Upload file" /></p>
			<div id="ajaxUploadMessage">TESTING123</div>
		}
	</div>
	@using (Html.BeginForm()) {
		@Html.ValidationSummary(true) 
		<div id="pictureArea" style="position: relative; width: 102px; height: 102px; cursor: pointer;">
			@{
				string picture = String.Format("{0}?sizeType={1}", Model.PictureUrl, PhotoSizeType);
				string widthpx = "100px";
				string heightpx = "100px";
			}
			
			<div id="picture" style="width: @widthpx; height: @heightpx">
				<img id="personPic" src="@picture.IsHtmlSafe()"/>
			</div>
		   <div id="addPicture" style="position: absolute; top: 41px; width: 96px; display: none; background-color: White;"> Add a picture </div>
		</div>
		<div class="editor-label">
			@Html.LabelFor(model => model.FirstName)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(model => model.FirstName) 
			@Html.ValidationMessageFor(model => model.FirstName)
		</div>		
		<div class="editor-label">
			@Html.LabelFor(model => model.LastName)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(model => model.LastName) 
			@Html.ValidationMessageFor(model => model.LastName)
		</div>
		<div class="editor-label">
			@Html.LabelFor(model => model.Gender)
		</div>
		<div class="editor-field">
			@Html.DropDownListFor(m=>m.Gender, Model.GenderChoices) 
			@Html.ValidationMessageFor(model => model.Gender)
		</div>
		<div class="editor-label">
			@Html.LabelFor(model => model.Guest)
		</div>
		<div class="editor-field">
			@Html.CheckBoxFor(m => m.Guest)
		</div>
		<div class="editor-label">
			@Html.LabelFor(model => model.BirthDate)
		</div>
		<div class="editor-field">
			@Html.EditorFor(m => m.BirthDate)
			@Html.ValidationMessageFor(m => m.BirthDate)
	   </div>
		<div class="editor-label">
			@Html.LabelFor(model => model.PrimaryContactForFamily)
		</div>
		<div class="editor-field">
			@Html.CheckBoxFor(m => m.PrimaryContactForFamily)
		</div>

		<div class="display-label">
			@Html.LabelFor(m => m.AddedBy): @Html.DisplayFor(m => m.AddedBy) at @Html.DisplayFor(m => m.AddedTstamp)
		</div>

	   <div class="display-label">
			@Html.LabelFor(m => m.LastUpdatedBy): @Html.DisplayFor(m => m.LastUpdatedBy) at @Html.DisplayFor(m => m.LastUpdatedTstamp)
		</div>

		<p>
		  <input type="submit" value="Save" />
		</p>
	}

	<div>
		@Html.ActionLink("Back to List", MVC.Person.Index())
	</div>